<?php
include ('common/constants.php');
include ('common/db.php');
session_start();

if ((!isset($_SESSION['user_email'])) || ($_SESSION['user_email']=='')) {
  header('location: login.php');
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Details</title>
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="resources/css/datepicker.css" rel="stylesheet">
<link href="resources/css/jquery.timepicker.css" rel="stylesheet">
<style type="text/css">
.cus_row {
	-moz-box-sizing: border-box;
	float:left;
	min-height: 1px;
	padding-right: 15px;
	position: relative;
}
</style>


</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container"> 
        <?php 
  
		  $sql = " SELECT * FROM user where email='". $_SESSION["user_email"]. "'";
		   
		  $result = mysql_query($sql) or trigger_error(mysql_error());
		?>
    	<a class="btn btn-navbar" style="margin-top: 25px;" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
      	</a> <a class="brand" style="text-align:center;" href="home.php"><img src="resources/icons/share_ride.png" style="max-width:55px; padding-right:15px"/>Carpooling.lk</a>
        <div class="nav-collapse collapse">
            <ul class="nav navbar-nav">
              <li style="text-align:center; float:left">
                <a href="advertise.php"><img src="resources/icons/speaker.png" style="max-width:40px; min-width: 20px;"/><br />Advertise</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="publish.php"><img src="resources/icons/publish.png" style="max-width:40px; min-width: 20px;"/><br />Publish</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="#notifPanel" data-toggle="modal"><img src="resources/icons/notification.png" style="max-width:40px; min-width: 20px;"/><br />Notifications</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="my_posts.php"><img src="resources/icons/my_posts.png" style="max-width:40px; min-width: 20px;"/><br />My Posts</a>
              </li>
              <li class="active" style="text-align:center; float:left">
                <a href="user_details.php"><img src="resources/icons/user_details.png" style="max-width:40px; min-width: 20px;"/><br />User Details</a>
              </li>
              <li style="text-align:center; float:left">
                <a href="preferences.php"><img src="resources/icons/preferences.png" style="max-width:40px; min-width: 20px;"/><br />Preferences</a>
              </li>
              <li style="text-align:center; float:left">
                <a data-toggle="collapse" data-target="#srch_panel"><img src="resources/icons/search.png" style="max-width:40px; min-width: 20px;"/><br />Search</a>
              </li>
              <li style="text-align:center; float:left; line-height: 0px; max-width: 200px;">
                &nbsp;&nbsp;<a class="" data-toggle="collapse"><h4>Hi <?php echo $_SESSION['user_name']?></h4></a><br />
              </li>
              <li style="text-align:center; float:left">
                &nbsp;&nbsp;<a style="padding:20px; margin: 0;" href="login.php">Sign Out</a>
              </li>
            </ul>
        </div>
      
        <!-- Search Panel -->
        <div id="includedSrchPanel" class="cus_row" style="width:100%"></div>
      
    </div>
  </div>
</div>
<div style="height:85px"></div>

<div class="container">


 <form class="form-actions" name="userDetails" id="userDetails">

        <fieldset>
          <legend>Edit / Modify User Details</legend>
          <div class="control-group">
          	<input type="hidden" name="email" id="email" value="<?php echo $_SESSION['user_email']?>" />
            <label class="control-label" for="txt_usrname">Username</label>
            <input id="txt_usrname" disabled="true" type="text" class="input-xlarge" placeholder="Email address" value="<?php echo mysql_result($result, 0, "email") ?>">
            
            <label class="control-label" for="txt_pwd">Password</label>
            <input id="txt_pwd" name="txt_pwd" type="password" class="input-medium" placeholder="Password"  value="<?php echo mysql_result($result, 0, "password") ?>">
            <input type="password" class="input-medium" placeholder="Re-type Password" value="<?php echo mysql_result($result, 0, "password") ?>">
             

            
             <label class="control-label" for="txt_usrtype">User Type</label>
             <div style="width:100%;">
                <div class="cus_row" style="width:20%; padding-top:10px; min-width:100px;">
                    <label class="radio">
                    	<input type="radio" name="user_type" id="user_type1" value="Personal" <?php if (mysql_result($result,0,"user_type")=="Personal") {
            echo "checked";
          } ?>>
                        Personal
                    </label>
                </div>
                <div class="cus_row" style="width:20%; padding-top:10px; min-width:100px;">
                    <label class="radio">
                        <input type="radio" name="user_type" id="usr_type2" value="Corporate" <?php if (mysql_result($result,0,"user_type")=="Corporate") {
            echo "checked";
          } ?>>
                        Corporate
                    </label>
                </div>
                <div class="cus_row" style="width:60%; padding-top:10px;">
                </div>
              </div>
              
              
            <label class="control-label cus_row"  style="width:100%; padding-top:10px">Name with surname</label>
            <div style="width:100%;">
                <div class="cus_row" style="width:100%; padding-top:10px; min-width:165px;">
                    <input id="name" name="name" type="text" class="input-medium" placeholder="Full Name" value="<?php echo mysql_result($result, 0, "name") ?>">
                </div>
            </div>
            
            <div style="width:100%;">
                <div class="cus_row" style="width:30%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="gender">Gender</label>
                    <div class="controls">
                        <select id="gender" name="gender" style="width:auto">
                            <option value="M" >Male</option>
                            <option value="F" >Female</option>
                        </select>
                    </div>
                </div>
                <div class="cus_row" style="width:70%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="prof">Profession</label>
                    <div class="controls">
                        <select id="profession" style="width:auto" name="profession">
                            <option value="Engineer">Engineer</option>
                            <option value="Doctor">Doctor</option>
                            <option value="Lawyer">Lawyer</option>
                            <option value="Manager">Manager</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div style="width:100%;">
                <div class="cus_row" style="width:30%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="age">Age</label>
                    <input id="age" name="age" type="text" style="width:auto" value="<?php echo mysql_result($result, 0, "age") ?>">
                </div>
                <div class="cus_row" style="width:70%; padding-top:10px; min-width:165px;">
                    <label class="control-label" for="txt_mobile">Phone Number</label>
                    <input id="txt_mobile" name="txt_mobile" type="text" class="input-medium" placeholder="0772345678" value="<?php echo mysql_result($result, 0, "phone_number") ?>">
                </div>
            </div>
            

          <div class="form-actions cus_row" style="width:100%; padding-left: 0px;">
            <button type="button" class="btn btn-large btn-primary" id="userDetails-btn">Save</button>
          </div>

        </fieldset>

    </form>
    
    <!-- Notification Panel -->
    <div id="includedNotifPanel"></div>
  
  <div style="height:30px"></div>
  <!-- Site footer -->
  <div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="navbar-inner"> <a class="brand" href="#" style="padding-left:7%">&copy; Carpooling.lk 2013</a> </div>
  </div>
</div>

<!-- JAVASCRIPT INCLUDES -->
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="resources/js/jquery.timepicker.js"></script>

<script type="text/javascript">

	//JS Validations
	function isDigit(inputVal)  {
		var pattern = /^\d+(?:\.\d+)?$/;  
		if(pattern.test(inputVal)) {  
			return true;    
		} else {  
			return false;  
		}
	}
	
	function isValidPhonenumber(phoneNum)  {
		var pattern = /^\d+$/;  
		if(pattern.test(phoneNum) && phoneNum.length == 10) {  
			return true;    
		} else {  
			return false;  
		}
	}

	//Include Search panel
	$(function(){
      $("#includedSrchPanel").load("search_panel.php"); 
    });
	
	//Include Notification panel
	$(function(){
      $("#includedNotifPanel").load("notification_panel.php");
    });
	
	function submitForm(){
      jQuery.ajax({
        url: 'saveUser.php',
        type: "POST",
        data: $('#userDetails').serialize(),
        success: function(data) {
          if(data=="success"){
            alert("User Details saved.");
          }else{  alert(data); }
		  location.href="home.php";
        }
      });
    }

    $("#userDetails-btn").bind('click', function(){
												 
		//JS validations				   
		if(!isDigit($("#age").val())){
		  alert("Please enter a valid value for age.");
		  $("#age").focus();
		}else if(!isValidPhonenumber($("#txt_mobile").val())){
		  alert("Please enter valid Phone Number with 10 digits.");
		  $("#txt_mobile").focus();
		} else {
		  submitForm();
		}
        
    });
	
	//Setting the Profession
	$("#profession").val("<?php echo mysql_result($result, 0, "profession") ?>");
	
	//Setting the Gender
	$("#gender").val("<?php echo mysql_result($result, 0, "gender") ?>");

</script>

</body>
</html>
